/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  Image,
  ListView,
  TouchableOpacity,
  View
} from 'react-native';


import ScrollableTabView, {
	DefaultTabBar,
	ScrollableTabBar
} from 'react-native-scrollable-tab-view'; 

import Card from './card';

export default class plus extends Component {
	constructor(props) {
		super(props);  
		var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(
        [
          { 
            imgPath: "http://pic33.nipic.com/20130916/3420027_192919547000_2.jpg",
            subTitle: "环球志愿者招募", 
            title: "让最疯狂的灵魂相遇",
            tags: [{key: 1, text: "10月10号"},{key: 2, text: "温暖"},{key: 2, text: "更有趣"},{key: 3, text: "浪漫一下"},],
            explain: "活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍",
          }, 
          { 
            imgPath: "http://pic33.nipic.com/20130916/3420027_192919547000_2.jpg",
            subTitle: "环球志愿者招募", 
            title: "让最疯狂的灵魂相遇",
            tags: [{key: 1, text: "10月10号"},{key: 2, text: "温暖"},{key: 3, text: "更有趣"},{key: 3, text: "浪漫一下"},],
            explain: "explain",
          }, 
          { 
            imgPath: "http://pic33.nipic.com/20130916/3420027_192919547000_2.jpg",
            subTitle: "环球志愿者招募", 
            title: "让最疯狂的灵魂相遇",
            tags: [{key: 1, text: "10月10号"},{key: 1, text: "温暖"},{key: 2, text: "更有趣"},{key: 3, text: "浪漫一下"},],
            explain: "explain",
          }, 
          { 
            imgPath: "http://pic33.nipic.com/20130916/3420027_192919547000_2.jpg",
            subTitle: "环球志愿者招募", 
            title: "让最疯狂的灵魂相遇",
            tags: [{key: 1, text: "10月10号"},{key: 2, text: "温暖"},{key: 3, text: "更有趣"},{key: 3, text: "浪漫一下"},],
            explain: "explain",
          }, 
          { 
            imgPath: "http://pic33.nipic.com/20130916/3420027_192919547000_2.jpg",
            subTitle: "环球志愿者招募", 
            title: "让最疯狂的灵魂相遇",
            tags: [{key: 1, text: "10月10号"},{key: 2, text: "温暖"},{key: 2, text: "更有趣"},{key: 2, text: "浪漫一下"},],
            explain: "explain",
          }, 

        ]),
    };
	}
  //hack code  fix issues 321
  componentDidMount(){
      this.scrollableTabView.goToPage(-1); 
      setTimeout(() => this.scrollableTabView.goToPage(0), 0); 
   }
  render() {  
    return ( 
      <ScrollableTabView renderTabBar={() => <DefaultTabBar  />} 
  			initialPage = {1}
  			tabBarUnderlineStyle ={{height: 0}} 
  			tabBarPosition='top'
  			tabBarBackgroundColor = '#2F3435'
  			tabBarInactiveTextColor ='#909090' 
  			tabBarActiveTextColor ='#E18920'
  			tabBarTextStyle ={{fontSize:20}}
        ref={(scrollableTabView) => {this.scrollableTabView = scrollableTabView;}}
      > 
  	     	 
          <ListView tabLabel='排行榜' 
                    dataSource={this.state.dataSource}
                    renderRow={(rowData) => <Card key={rowData.key}                
                                                  rowData={rowData}  
                                                  navi= {this.props.navi} />
                              }/>
  			  <View style={styles1.container} tabLabel='热门' ><Text>邮箱阿斯顿发生2</Text></View>  
  	     	<View style={styles1.container} tabLabel='我参加的' ><Text>邮箱啊手动阀沙发党3</Text></View>   
  		</ScrollableTabView> 　
    );
  }
}

const styles1 = StyleSheet.create({ 
  container: {
    flex: 1,  
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  image: {
  	height: 30,
  	width: 30,

  },
});

 
